<template>
	<view v-if="show" class="modal-container" @touchmove.stop.prevent>
		<view class="modal-box">
			<view v-if="info && info.goods_code" class="modal-title">
				标号：{{ info.goods_code }}
			</view>
			<view v-else class="modal-input">
				<input class="input-inner" type="text" focus placeholder="输入标号" v-model="formParams.goods_code">
				<image class="input-icon" src="/static/icon_scan.png" mode="" @click="handleScan"></image>
			</view>
			<view v-if="info && info.label_price" class="modal-price">
				底价：￥{{ info.label_price }}
			</view>
			<view class="modal-input">
				<input class="input-inner" type="text" :focus="info && info.goods_code" placeholder="输入我的投标价格" v-model="formParams.price">
			</view>
			<pys-button :border-radius="60" height="104" width="412" size="44" @click="handleClick">确定投标</pys-button>
		</view>
		<view class="modal-mask" @click="handleClickCancel"></view>
	</view>
</template>

<script>
import pysButton from '../pys-button/pys-button.vue';

export default {
	name: 'Modal',
	components: {
		pysButton
	},
	data() {
		return {
			show: false,
			formParams: {
				goods_code: '',
				price: '',
			},
			info: null,
			onResolve: null,
			onReject: null,
		};
	},
	methods: {
		handleClick() {
			this.show = false;
			this.onResolve({ ...this.formParams });
			setTimeout(() => {
				this.formParams.goods_code = '';
				this.formParams.price = '';
			});
		},
		handleClickCancel() {
			this.show = false;
			this.onReject();
		},
		open(item) {
			if (item && item.goods_code) {
				this.info = {
					goods_code: item.goods_code,
					label_price: item.label_price
				};
			}
			this.show = true;
			return new Promise((resolve, reject) => {
				this.onResolve = resolve;
				this.onReject = reject;
			});
		},
		handleScan() {
			const that = this
			this.$jswx.scanQRCode({
				needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
				scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
				success: function (res) {
					console.log(res)
					that.formParams.goods_code = res.resultStr // 当needResult 为 1 时，扫码返回的结果
					this.info = {
						goods_code: res.resultStr,
						label_price: ''
					}
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.modal-container {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: $z-index-modal;
	display: flex;
	align-items: center;
	justify-content: center;
}

.modal-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: $z-index-modal;
}

.modal-box {
	position: relative;
	z-index: $z-index-modal + 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 60rpx 0 40rpx;
	width: 630rpx;
	height: 560rpx;
	border-radius: 20rpx;
	background-color: #fff;
}

.modal-title {
	padding: 0 30rpx;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 40rpx;
	color: white;
	font-size: 40rpx;
	background-color: rgba(136, 202, 190, 100);
	text-align: center;
}

.modal-price {
	color: #EC1111;
	font-size: 36rpx;
}
.modal-input {
	display: flex;
	align-items: center;
	height: 100rpx;
	width: 520rpx;
	padding: 0 12rpx 0 20rpx;
	border: 1px solid #097B5D;
	border-radius: 10rpx;
}
.input-inner {
	flex: 1 0 1%;
	font-size: 36rpx;
}
.input-icon {
	width: 80rpx;
	height: 80rpx;
}

.mtop {
	margin-top: 30rpx;
}

.mbtm {
	margin-bottom: 30rpx;
}

.modal-btn-area {
	padding: 0 50rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flex-column {
	flex-direction: column;
}
</style>
